<template>
  <a-card :bordered='false' style='margin-top:24px'>
    <div class='ant-descriptions-title'>销售金额统计</div>
    <div class='table-page-search-wrapper'>
      <a-form layout='inline'>
        <a-row :gutter='24'>
          <a-col :md='3' :sm='24'>
            <a-form-item label='地区'>
              <a-select v-model='queryParam.provinceid' placeholder='省' @change="onProvinceChange($event, 'form')">
                <a-select-option :value='item.provinceid' v-for='item in provinceList' :key='item.provinceid'>{{
                    item.province
                  }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md='2' :sm='24'>
            <a-form-item>
              <a-select v-model='queryParam.cityid' placeholder='市' @change="onCityChange($event, 'form')">
                <a-select-option :value='item.cityid' v-for='item in cityList' :key='item.cityid'>{{
                    item.city
                  }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md='2' :sm='24'>
            <a-form-item>
              <a-select v-model='queryParam.area' placeholder='区' @change="onAreaChange">
                <a-select-option :value='item.area' v-for='item in areaList' :key='item.area'>{{
                    item.area
                  }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="3" :sm="24">
              <a-form-item>
                <a-select v-model="queryParam.store_id" placeholder="门店">
                  <a-select-option :value="item.id" v-for="item in storeList" :key="item.id">{{
                      item.name
                    }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          <a-col :md='4' :sm='24'>
            <a-form-item>
              <a-input placeholder='请输入姓名或手机号' v-model='queryParam.search' />
            </a-form-item>
          </a-col>
          <a-col :md='6' :sm='24'>
            <a-form-item label='时间范围'>
              <a-range-picker v-model='dateRange' @change='dateRangeChange'>
                <a-icon slot='suffixIcon' type='calendar' />
              </a-range-picker>
            </a-form-item>
          </a-col>
          <a-col :md='4' :sm='24'>
              <span class='table-page-search-submitButtons'>
                <a-button type='primary' @click='handleSearch(true)' icon='search'
                          style='margin-right: 8px'>查询</a-button>
                <a-button type='primary' @click='handleReset' icon='search'>重置</a-button>
              </span>
          </a-col>
        </a-row>
      </a-form>
      <s-table
        ref='table'
        size='default'
        rowKey='id'
        :columns='columns'
        :data='loadData'
        :pagination='pagination'
        :pageSize='5'
      >
        <template slot='head_img' slot-scope='text'>
          <a-avatar shape='square' :size='32' icon='user' :src='text' />
        </template>
        <template slot='actions' slot-scope='text, record'>
          <a @click='handleDetail(record)'>详情</a>
        </template>
      </s-table>
    </div>
  </a-card>
</template>

<script>
import formTableMixin from '@/mixins/formTableMixin'
import { stewardWalletShow } from '@/api/stat'
import { areaLink, cityLink, provinceLink,stores } from '@/api/notControl'
import moment from 'moment'
import pick from 'lodash.pick'

const columns = [
  {
    title: '头像',
    dataIndex: 'head_img',
    scopedSlots: { customRender: 'head_img' }
  },
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '电话',
    dataIndex: 'mobile'
  },
  {
    title: '所属门店',
    dataIndex: 'store_name'
  },
  {
    title: '门店地址',
    dataIndex: 'apply_address'
  },
  {
    title:'单量',
    dataIndex: 'num'
  },
  {
    title: '销售金额',
    dataIndex: 'sum_price',
    customRender(text) {
      return '￥' + text
    }
  },
  {
    title: '操作',
    dataIndex: 'actions',
    width: '150px',
    scopedSlots: { customRender: 'actions' }
  }

]
export default {
  name: 'StewardWalletShow',
  mixins: [formTableMixin],
  data() {
    this.columns = columns
    this.listAction = (paramster) => {
      return stewardWalletShow(paramster).then(res=>{
        this.dateRange = [moment(res.data.atime) ,moment(res.data.etime)]
        return res
      })
    }
    return {
      loadingStat: false,
      wallet: {},
      cityList: [],
      provinceList: [],
      areaList: [],
      dateRange: [],
      storeList:[]
    }
  },
  created() {
    provinceLink().then(res => {
      this.provinceList = res.data
    })
  },
  methods: {
    getStores(){
      const params = pick(this.queryParam,['province','city','area'])
      stores(params).then(res=>{
        this.storeList = res.data.clothes
      })
    },
    onAreaChange(){
      this.getStores()
    },
    handleDetail (record) {
      this.$router.push({
        name: 'stewardWalletDetail',
        query: {
          user_id: record.user_id,
          name: record.name,
        }
      })
    },
    dateRangeChange(e) {
      this.queryParam.atime = e[0].format('YYYY-MM-DD')
      this.queryParam.etime = e[1].format('YYYY-MM-DD')
    },
    onProvinceChange(provinceid, formId) {
      return cityLink({ provinceid }).then(res => {
        this.cityList = res.data
        this.queryParam.cityid = undefined
        this.queryParam.province = this.provinceList.find(item => item.provinceid === provinceid).province
      })
    },
    onCityChange(cityid, formId) {
      return areaLink({ cityid }).then(res => {
        this.areaList = res.data
        this.queryParam.areaid = undefined
        this.queryParam.city = this.cityList.find(item => item.cityid === cityid).city
      })
    }
  }
}
</script>

<style scoped>

</style>